<template>
<div class="home">
    <div @click="www">选择考试</div>
  <van-popup
  round
    v-model:show="show"
    position="bottom"
    :style="{ maxheight: '80%' }"
  >
    <div class="top">
      <span @click="go"></span>
      <p>选择考试</p>
      <span></span>
    </div>
    <ul>
      <li v-for="item in data1" :key="item.id" @click="goto(item.title,item.id)">
        <p>{{ item.title }}</p>
        <p>{{ item.brief }}</p>
      </li>
    </ul>
  </van-popup>
  <van-popup
    v-model:show="show2"
    position="bottom"
    :style="{ maxheight: '80%' }"
    round
  >
  <div class="top">
      <span @click="goback2">&lt;</span>
      <p>{{title}}</p>
      <span></span>
    </div>
    <ul>
      <li @click="hhh">
        在校生
      </li>
      <li @click="hhh">
        在职
      </li>
    </ul>
  </van-popup>
  <van-popup
  round
    v-model:show="show3"
    position="bottom"
    :style="{ maxheight: '80%' }"
  >
    <div class="top">
      <span @click="goback3">&lt;</span>
      <p>{{title}}</p>
      <span></span>
    </div>
    <ul>
      <li v-for="item in data3" :key="item.id">
        <p>{{ item.major_name }}</p>
      </li>
    </ul>
    <van-button type="default" v-model:show='show4'>完成</van-button>
    <!-- <button >完成</button> -->
  </van-popup>
</div>
  
</template>

<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "axios";

const show = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const data = reactive({
  data1: [],
  data3:[],
  title:''
});
const { data1,title,data3 } = toRefs(data);
const www = () => {
  show.value = true;
};
const goto = (title,id) => {
  show.value = false;
  show2.value=true
  data.title=title
  axios
    .get('home/getFirstClassify')
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        data.data3 = res.data.data;
      }
    });
};
const hhh=()=>{
  show2.value = false;
  show3.value = true;

}
const go=()=>{
  show.value = false;
}
const goback2=()=>{
  show2.value = false;
  show.value = true;
}   
const goback3=()=>{
  show3.value = false;
  show2.value = true;
} 
const to=()=>{
  show4.value=true
}  
onMounted(() => {
  axios
    .get("https://www.lexuemiao.com/api/app/home/getFirstClassify")
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        data.data1 = res.data.data;
      }
    });
  
});
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 600px;
  background-color: aqua;
}
</style>